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Overview 

■ Today, you’ll program your own website using a cloud-based 
development - or programming - platform called IBM Bluemix. 

■ This platform can be used for coding websites, creating apps for 
smartphones or tablets, or writing programs that a business might 
use. 

- You’ll also learn about the CoderDojo, a place where you can 
meet other people interested in computers and coding, and learn 
development skills together. 
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What is IBM Bluemix? 


■ Bluemix is an open-standards, cloud-based platform for building, 
managing, and running apps of all types. 


■ You can use IBM Bluemix to build, manage, and run apps for web, 
mobile (such as tablets or phones), and smart devices (like a 
fitbit). 


■ Bluemix lives in the cloud. It is based on the Cloud Foundry open 
source platform as a service (PaaS), and enables organizations 
and developers to quickly and easily create, deploy, and manage 
applications in the cloud. 


■ URL: https://ibm.biz/bluemix4kids/ 
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What is Node.js? 


■ Node.js is a platform built on Chrome's JavaScript runtime for 
easily building fast network applications that a developer can 
easily “grow” to handle more users or more machine traffic. 

■ Node.js uses an event-driven, non-blocking I/O model that makes 
it lightweight and efficient, perfect for data-intensive real-time 
applications that run across distributed devices. 

■ What does this mean in English? It means Node.js programs 
respond when either users or sensors interact with them - and the 
programs respond quickly no matter what type of device is 
requesting information. 

- URL: ittp://nodejs.org/ 
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Build a website using the Bluemix platform 

■ Today, you will create a website on the IBM Bluemix platform 
and publish it. 

■ The application includes a framework for publishing HTML web 
pages. 

- Web browsers can make requests to the Node.js website at the 
IBM Bluemix URL your server is brought up on. 

■ In the web browser, an HTML-formatted page is displayed with 
a title and counter. 

■ Students will make changes to a website and edit the application 
to pass and display a new counter. 
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Build a website using the Bluemix platform 


Web browsers 

(from anyone, anywhere) 

1. Enter URL 

Node.js server on the Internet 

(running on IBM Bluemix) 

2. Node.js server processes request 

Node.js plus Express Server 

Express framework 

• App.get (7) accepts all 
requests from browsers 

• Renders (index.ejs) to 
display HTML home page 

• Passes counters from server 
to HTML 

Counter resets to 0 when server 
stopped 




3. Render Index.ejs 



HTML source 



Formatted HTML 
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Activity-Application Concept 

■ The server uses the Express Framework code to accept the 
requests, increment and pass an internal counter, and display the 
Index HTML page in the browser. 

■ You will make some changes to the code in the DevOps Services 
Integrated Development Environment, and deploy the new version 
of the application back to Bluemix. 

■ The code you write is JavaScript. You will use the Kids Code! 
Cards and follow the steps necessary for adding another counter. 

■ You will also modify the HTML pages in order to link static HTML 
pages, upload pictures, and do other HTML formatting to your 
site. 


Kids Code! 




Activity - Step 1 

■ The first activity consists of modifying the HTML of a node.js 
application. 

■ Get started by looking at Kids Code! Card 1. 

■ If you are using Windows, ensure that file extensions are visible in 
Windows Explorer on your computer. 

■ You will begin by modifying the Index page to have your own title. 

■ Once you have followed the steps on Kids Code! Card 1, you can 
deploy your page and see the changes live on the Internet. 
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Activity - Step 2 

■ The second activity consists of editing node.js applications. 

■ Start by looking at Kids Code! Card 2. 

- Follow the steps on Card 2 to modify the app.js code to add 
another counter and pass it to the HTML. 

■ Modify the index page to display the new counter. 

■ Deploy your changes and see the changes live on the Internet. 
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Activity - Step 3 

■ The third activity consists of adding linked web pages to your site. 

■ Begin by looking at the Kids Code! Card 3. 

- Follow the steps on Card 3 to add the linked web pages to your 
site. 

■ Deploy your changes and see the changes live on the Internet. 

■ If you have more advanced students coding skills, you can 
personalize your page beyond the given example or choose to 
further modify the app.js javascript code. 
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Extended exercises 

■ NodeJS_Simple_3 - Adding database capabilities 

• https://hub.jazz.net/project/rewillen/NodeJS_Simple_3/overview 

• Adds a database service to the application to store the counter 

• Students see the difference between the life cycle of the node.js server 
and a persistent database storage service 

■ CoderDojo My First Website 

• http://kata.coderdojo.com/wiki/My_First_Website 

• Great introduction exercises for HTML and CSS 
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CoderDojo 

■ CoderDojo is an open source, volunteer-led network of free 
computer programming clubs for young people aged 7-17. 

■ CoderDojo puts an emphasis on self-motivated learning through 
project work, peer-to-peer mentoring and the creation of socially 
innovative projects. 

■ IBMers have done many things to support CoderDojo already, and 
right now we are collaborating internationally to make Bluemix the 
ultimate playground for young engineers. 

■ To learn more or become a volunteer, 
check the CoderDojo community 

• http://coderdojo.com 
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Resources 

■ Learn more about IBM Bluemix and sign up 

• ibm.biz/bluemix4kids 

■ Bluemix sushi cards: Node.js, java, mobile, python, loT, and more! 

• ibm.biz/bluemix4dojo 

■ Bluemix Activity Kit 

• ibm.biz/bluemix40DC 

■ Learn more about CoderDojo 

• http://coderdojo.com 

■ developerWorks article: Build your first Node.js website 

• ibm.com/developerworks/library/wa-simplenodel -app/index.html 

■ Video tutorial for coding with Bluemix 

• http://youtu.be/owCspJjkrQs 
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on demand C*community 

Launched in 2003, IBM’s community service initiative supported 16 
million hours of volunteer work by nearly 250,000 volunteers in its 
first decade worldwide. It's an innovative approach to corporate 
philanthropy, but at its heart is IBM's traditional belief that we all can, 
and should, share what we know to make a difference in our 
communities. 
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